<template>
	<view>
		<view class="header_bt_01">
			<image src="http://124.222.72.174:8008/images/头像/头像2.jpg" class="hander_tx"></image>
			<uni-search-bar class="uni-mt-10" style="color: #f3f3f3;" bgColor="#F8F8F8" radius="100"
				placeholder="搜索兼职信息" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>
		<view class="Run_1" style="margin-top: 120rpx;border-radius: 200rpx;">
			<view class="Run_1_1" :class="GreadId===0?'head_Gle':''" @click="OnquAndmai(0)">
				<text class="Run_2">全部</text>
			</view>

			<view class="Run_1_2" :class="GreadId===1?'head_Gle':''" @click="OnquAndmai(1)">
				<text class="Run_3">食堂</text>
			</view>
			<view class="Run_1_2" :class="GreadId===2?'head_Gle':''" @click="OnquAndmai(2)">
				<text class="Run_3">超市</text>
			</view>
			<view class="Run_1_2" :class="GreadId===3?'head_Gle':''" @click="OnquAndmai(3)">
				<text class="Run_3">勤工</text>
			</view>
			<view class="Run_1_2" :class="GreadId===4?'head_Gle':''" @click="OnquAndmai(4)">
				<text class="Run_3">其他</text>
			</view>
		</view>
		<!-- 开始 展示内容区块 -->
		<view style="margin-top: 130rpx;font-family: fantasy;">
			<view style="position: relative;" v-if="GreadId===0" v-for="(item,i) in PartList" :key="i">
					<uni-group mode="card">
						<view style="height:300rpx;">
							<view class="">
								<text style="font-size: 48rpx;">{{ item.title }}</text>
								<view class="Parttime1">
									<text v-if="item.type===1">食堂</text>
									<text v-else-if="item.type===2">超市</text>
									<text v-else-if="item.type===3">勤工</text>
									<text v-else-if="item.type===4">其他</text>
								</view>
								<text class="Parttime2">{{ item.Remuneration }}</text>
							</view>
							<image
								src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%A8%E6%80%81%E5%8C%BA%E5%9D%97%E5%85%BC%E8%81%8C%E4%BF%A1%E6%81%AF-Pt_information/%E5%B7%A5%E4%BD%9C%E5%9C%B0%E7%82%B9.png"
								mode=""
								class="Parttime3"></image>
							<text class="Parttime5" style="font-weight: 1000;">{{ item.place }}</text>
							<text class="Parttime5" style="left: 500rpx;">招聘人数：{{ item.peoplenum }}</text>
							<image
								src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%A8%E6%80%81%E5%8C%BA%E5%9D%97%E5%85%BC%E8%81%8C%E4%BF%A1%E6%81%AF-Pt_information/%E6%97%B6%E6%AE%B5.png"
								mode=""
								class="Parttime4"></image>
							<text class="Parttime6">{{ item.timeD }}</text>
							<button class="Parttime7" style="background-color: #51d3d3;color: #FFFFFF;" type="default"  @click="LookLook(item)">快来看看</button>
						</view>
						
					</uni-group>
			</view>
			
			<view style="position: relative;font-family: fantasy;" v-if="GreadId>0 && item.type===GreadId" v-for="(item,i) in PartList" :key="i" >
					<uni-group mode="card">
						<view style="height:300rpx;">
							<view class="">
								<text style="font-size: 48rpx;">{{ item.title }}</text>
								<view class="Parttime1">
									<text v-if="item.type===1">食堂</text>
									<text v-else-if="item.type===2">超市</text>
									<text v-else-if="item.type===3">勤工</text>
									<text v-else-if="item.type===4">其他</text>
								</view>
								<text class="Parttime2">{{ item.Remuneration }}</text>
							</view>
							<image
								src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%A8%E6%80%81%E5%8C%BA%E5%9D%97%E5%85%BC%E8%81%8C%E4%BF%A1%E6%81%AF-Pt_information/%E5%B7%A5%E4%BD%9C%E5%9C%B0%E7%82%B9.png"
								mode=""
								class="Parttime3"></image>
							<text class="Parttime5" style="font-weight: 1000;">{{ item.place }}</text>
							<text class="Parttime5" style="left: 500rpx;">招聘人数：{{ item.peoplenum }}</text>
							<image
								src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%A8%E6%80%81%E5%8C%BA%E5%9D%97%E5%85%BC%E8%81%8C%E4%BF%A1%E6%81%AF-Pt_information/%E6%97%B6%E6%AE%B5.png"
								mode=""
								class="Parttime4"></image>
							<text class="Parttime6">{{ item.timeD }}</text>
							<button class="Parttime7" style="background-color: #51d3d3;color: #FFFFFF;" type="default" @click="LookLook(item)">快来看看</button>
						</view>
						
					</uni-group>
			</view>
		</view>
		

		<!-- 结束 展示内容区块 -->
		<view style="padding:5px 0px 20px 0px;" v-if="typeNUm>3 || GreadId===0">
			<uni-load-more color="#007AFF" :status="status" iconType="auto" />
			<view style="height: 100rpx;">
			
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				GreadId: 0,
				PartList:[
					{
						on:'16555499455684',//信息编号
						Userid:'1111',//发布人id
						title:'四堂飘香馆配送兼职',//标题
						place:'至诚学院第四食堂',//工作地点
						peoplenum:50,//招聘人数
						Datet:'任意日期',//日期
						timeD:'11:30-12:30/17:30-18:30',//工作时间锻
						Remuneration:'30/时',//酬金
						type:1,//类型  0 全部 1食堂 2超市 3勤工 4 其他
						job_content:'1、能够在工作的时间段内到达食堂\n2、主要负责帮忙端菜\n3、偶尔负责看台\n',//工作内容
						Job_requirements:'1、勤奋、吃苦\n2、有责任心\n3、能长期者优先\n',//工作要求
						Publisher:'至诚学院四堂经理',//发布者
						phone:'13712345678',//联系方式
						
						
					},
					{
						on:'16555499455684',//信息编号
						Userid:'1111',//发布人id
						title:'张亮麻辣烫兼职',//标题
						place:'至诚学院第三食堂',//工作地点
						peoplenum:20,//招聘人数
						Datet:'每周末',//日期
						timeD:'11:30-12:30',//工作时间锻
						Remuneration:'20/时',//酬金
						type:1,//类型  0 全部 1食堂 2超市 3勤工 4 其他
						job_content:'1、能够在工作的时间段内到达食堂\n\n2、主要负责帮忙端菜\n\n3、偶尔负责看台\n',//工作内容
						Job_requirements:'1、勤奋、吃苦\n\n2、有责任心\n\n3、能长期者优先\n',//工作要求
						Publisher:'至诚学院三堂经理',//发布者
						phone:'13956123457',//联系方式
						
					},
					{
						on:'16555499455684',//信息编号
						Userid:'1111',//发布人id
						title:'六意超市收银员',//标题
						place:'西区六意超市',//工作地点
						peoplenum:10,//招聘人数
						Datet:'周一至周五',//日期
						timeD:'9:30-16:30',//工作时间锻
						Remuneration:'60/天',//酬金
						type:2,//类型  0 全部 1食堂 2超市 3勤工 4 其他
						job_content:'1、能够在工作的时间段内到达食堂\n\n2、主要负责帮忙端菜\n\n3、偶尔负责看台\n',//工作内容
						Job_requirements:'1、勤奋、吃苦\n\n2、有责任心\n\n3、能长期者优先\n',//工作要求
						Publisher:'至诚学院二堂经理',//发布者
						phone:'13712345678',//联系方式
						
					},
					{
						on:'16555499455684',//信息编号
						Userid:'1111',//发布人id
						title:'学工部图书馆整理',//标题
						place:'至诚图书馆',//工作地点
						peoplenum:5,//招聘人数
						Datet:'单号',//日期
						timeD:'10:00-11:30',//工作时间锻
						Remuneration:'20/时',//酬金
						type:3,//类型  0 全部 1食堂 2超市 3勤工 4 其他
						job_content:'1、能够在工作的时间段内到达食堂\n\n2、主要负责帮忙端菜\n\n3、偶尔负责看台\n',//工作内容
						Job_requirements:'1、勤奋、吃苦\n\n2、有责任心\n\n3、能长期者优先\n',//工作要求
						Publisher:'至诚学院一堂经理',//发布者
						phone:'13712345678',//联系方式
						
					},
					{
						on:'16555499455684',//信息编号
						Userid:'1111',//发布人id
						title:'益禾堂外卖配送',//标题
						place:'桃李园益禾堂',//工作地点
						Remuneration:'20/时',//酬金
						peoplenum:10,//招聘人数
						Datet:'双号',//日期
						timeD:'11:00-12:30/16:00-18:00/19:00-22:00',//工作时间锻
						type:4,//类型  0 全部 1食堂 2超市 3勤工 4 其他
						job_content:'1、能够在工作的时间段内到达食堂\n\n2、主要负责帮忙端菜\n\n3、偶尔负责看台\n',//工作内容
						Job_requirements:'1、勤奋、吃苦\n\n2、有责任心\n\n3、能长期者优先\n',//工作要求
						Publisher:'至诚学院八堂经理',//发布者
						phone:'13712345678',//联系方式
					}
				],
				pageNum: 1,
				status: 'more',
				typeNUm:0,//判断每页数据量 少于4个 不显示加载信息

			};
		},
		onLoad() {

		},
		methods: {
			OnquAndmai(value) {
				this.GreadId = value
				this.PartList.forEach((item,value,arr)=>{
					if(item.tyPe===this.GreadId){
						this.typeNUm++
					}
				})
				
			},
			async getmo() {
				this.PartList.push({
					on:'16555499455684',//信息编号
					Userid:'1111',//发布人id
					title:'益禾堂外卖配送',//标题
					place:'桃李园益禾堂',//工作地点
					Remuneration:'20/时',//酬金
					peoplenum:10,//招聘人数
					Datet:'双号',//日期
					timeD:'11:00-12:30/16:00-18:00/19:00-22:00',//工作时间锻
					type:4,//类型  0 全部 1食堂 2超市 3勤工 4 其他
					job_content:'1、能够在工作的时间段内到达食堂\n\n2、主要负责帮忙端菜\n\n3、偶尔负责看台',//工作内容
					Job_requirements:'1、勤奋、吃苦\n\n2、有责任心\n\n3、能长期者优先',//工作要求
					Publisher:'至诚学院八堂经理',//发布者
					phone:'13712345678',//联系方式
				})
				this.status = 'more'
			},
			LookLook(item){
				uni.setStorage({
					key: 'Part',
					data: item,
					success: function() {
						console.log("向下级发送：" + item)
					}
				})
				uni.navigateTo({
					url: 'Part_details/Part_details'
				})
				console.log("快来看看")
			}

		},
		onReachBottom() {
			console.log("触底啦")
			this.status = 'loading'
			const that = this;
			setTimeout(function() {
				that.pageNum++,
					that.getmo()
			}, 1000);
		},
	}
</script>

<style lang="scss">
	//头部样式
	.header_bt_01 {
		height: 115rpx;
		background-color: #FFFFFF;
		border-bottom: 2px solid #F7F7F7;

	}

	//头部样式--头像
	.hander_tx {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		margin: 0px 0px 0px 8px;
	}

	//头部样式--取消字体 白色
	/deep/ .uni-searchbar__cancel {
		padding-left: 20rpx;
		line-height: 72rpx;
		font-size: 14px;
		color: #f3f3f3;
	}

	//顶部导航栏
	.Run_1 {
		border-width: 0px;
		position: absolute;
		left: 24rpx;
		top: 0px;
		width: 700rpx;
		height: 100rpx;
		display: flex;
		background-color: #FFFFFF;
		text-align: center;
	}

	.Run_1_1,
	.Run_1_2 {
		width: 375rpx;
	}

	//顶部导航栏 文本样式
	.Run_2,
	.Run_3 {
		font-size: 15px;
		font-family: "微软雅黑";
		height: 100rpx;
		line-height: 100rpx;
	}

	.head_Gle {
		background-color: rgba(81, 211, 211, 1);
		border-radius: 50rpx;
		font-family: "微软雅黑";
		color: seashell;
		font-weight: 700;
		font-style: italic;
		letter-spacing: normal;
		box-shadow: 5px 10px 20px #51d3d3;
	}

	.Parttime1 {
		position: absolute;
		border-radius: 100rpx;
		background-color: #EC808D;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		font-size: 15px;
		top: 40rpx;
		left: 500rpx;
		color: #ffffff;
	}
	.Parttime2 {
		position: absolute;
		top: 38rpx;
		left: 620rpx;
		color: #D9001B;
	}
	.Parttime3{
		position: absolute;
		    width: 60rpx;
		    height: 60rpx;
		    top: 140rpx;
	}
	.Parttime4{
		position: absolute;
		    width: 60rpx;
		    height: 60rpx;
		    top: 240rpx;
		    left: 50rpx;
	}
	.Parttime5{
		position: absolute;
		    top: 150rpx;
		    left: 120rpx;
			width: 380rpx;
	}
	.Parttime6{
		position: absolute;
		    top: 250rpx;
		    left: 120rpx;
			width: 380rpx;
	}
	.Parttime7{
		position: absolute;
		    top: 240rpx;
		    left: 510rpx;
		    width: 200rpx;
		    height: 60rpx;
		    line-height: 60rpx;
		    border-radius: 100px;
		    background-color: rgba(81, 211, 211, 1);
		    box-shadow: 5px 10px 10px #51d3d3;
		    color: #ffffff;
		    font-size: 15px;
	}
</style>
